<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-search" size="mini" @click="handleSearch">搜索</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="show"
          @click="handleUpdate"
          v-hasPermi="['production:deviceAlter:edit']">
          修改
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="exportExcel('#test', '穴数变更数据')"
          v-hasPermi="['production:deviceAlter:export']">
          导出当前数据
        </el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="deviceAlterList"
      border
      id="test"
      stripe
      highlight-current-row
      :height="tableH"
      @row-click="clickRow"
      @scrollBottom="load"
      :header-cell-style="{ 'text-align': 'center', padding: '0px' }">
      <el-table-column label="#" type="index" fixed="left" align="center"></el-table-column>
      <el-table-column label="生产日期" width="180" align="center" prop="moeScrq" />
      <el-table-column label="序号" align="center" width="60" prop="moeScxh" />
      <el-table-column label="制造单号" width="135" align="center" prop="moeZzdh" />
      <el-table-column label="销售单号" width="135" align="center" prop="moeSodh" />
      <el-table-column label="物料代码" align="center" prop="moeWldm" width="135" />
      <el-table-column label="品名规格" show-overflow-tooltip prop="moePmgg" width="400" />
      <el-table-column label="计划数量" align="center" prop="moeScsl" width="80" />
      <el-table-column label="组别" width="80" align="center" prop="moeBbdm" />
      <el-table-column label="机台编号" width="80" align="center" prop="moeJtbh" />
      <el-table-column label="模具编号" width="150" show-overflow-tooltip prop="moeMjbh" />
      <el-table-column label="模具名称" width="150" prop="moeMjmc" />
      <el-table-column label="标准穴数" align="center" prop="moeXs" width="100" />
      <el-table-column label="实际穴数" align="center" prop="oriXs" width="100" />
      <el-table-column label="成型时间(s)" align="center" prop="moeCxsj" width="100" />
    </el-table>

    <!-- 添加或修改采购属性对话框 -->
    <el-dialog :title="title" v-model="open" :close-on-click-modal="false" draggable width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="机台编号" label-width="110px" prop="moeJtbh">
          <el-input v-model="form.moeJtbh" placeholder="请输入机台编号" />
        </el-form-item>
        <el-form-item label="实际穴数" label-width="110px" prop="moeXs">
          <el-input v-model="form.moeXs" placeholder="请输入实际穴数" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--    查询对话框-->
    <el-dialog :title="title" v-model="openSearch" :close-on-click-modal="false" draggable width="780px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-col :span="12">
          <el-form-item label="完工日期" label-width="100px">
            <el-date-picker
              v-model="daterangeMoe"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="制造单号" label-width="100px" prop="moeZzdh">
            <el-input
              v-model="queryParams.moeZzdh"
              placeholder="请输入制造单号"
              clearable
              style="width: 240px"
              size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售单号" label-width="100px" prop="moeSodh">
            <el-input
              v-model="queryParams.moeSodh"
              placeholder="请输入销售单号"
              clearable
              style="width: 240px"
              size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料代码" label-width="100px" prop="moeWldm">
            <el-input
              v-model="queryParams.moeWldm"
              placeholder="请输入物料代码"
              clearable
              style="width: 240px"
              size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机台编号" label-width="100px" prop="moeJtbh">
            <el-input
              v-model="queryParams.moeJtbh"
              placeholder="请输入机台编号"
              clearable
              style="width: 240px"
              size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模具编号" label-width="100px" prop="moeMjbh">
            <el-input
              v-model="queryParams.moeMjbh"
              placeholder="请输入模具编号"
              clearable
              style="width: 240px"
              size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="品名规格" label-width="100px" prop="moePmgg">
            <el-input
              v-model="queryParams.moePmgg"
              placeholder="请输入品名规格"
              clearable
              style="width: 610px"
              size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item style="margin-top: 25px; display: flex; justify-content: flex-end">
            <el-button @click="openSearch = false">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { exportTable } from '@/utils/ruoyi'
import { listDeviceAlter, updateDeviceAlter } from '@/api/production/deviceAlter'

export default {
  name: 'DeviceAlter',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      tableH: document.body.clientHeight - 230,
      show: true,
      openSearch: false,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采购属性表格数据
      deviceAlterList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      nowData: null,
      // 有效标志字典
      cgFlagOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 40,
        moeZzdh: null,
        moeSodh: null,
        moeWldm: null,
        moePmgg: null,
        moeJtbh: null,
        moeMjbh: null,
      },
      // 建立日期时间范围
      daterangeMoe: [this.$moment().startOf('month').toDate(), this.$moment().add(100, 'year').endOf('month').toDate()],
      //日期初始化
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        moeJtbh: [{ required: true, message: '机台编号不能为空', trigger: 'blur' }],
        moeXs: [{ required: true, message: '实际穴数不能为空', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询采购属性列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {}
      if (null != this.daterangeMoe && '' != this.daterangeMoe) {
        this.queryParams.params['beginMoeWgrq'] = this.moment(this.daterangeMoe[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParams.params['endMoeWgrq'] = this.moment(this.daterangeMoe[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      this.queryParams.pageNum = 1
      listDeviceAlter(this.queryParams).then((response) => {
        this.deviceAlterList = []
        this.deviceAlterList = this.deviceAlterList.concat(response.rows)
        this.total = response.total
        this.loading = false
        if (this.deviceAlterList.length > 0) {
          this.nowData = this.deviceAlterList[0]
          this.show = false
        }
      })
    },
    load() {
      if (this.queryParams.pageNum < Math.ceil(this.total / this.queryParams.pageSize)) {
        this.queryParams.pageSize = 40
        this.queryParams.pageNum++
        listDeviceAlter(this.queryParams).then((response) => {
          this.deviceAlterList = this.deviceAlterList.concat(response.rows)
          this.total = response.total
          this.loading = false
        })
      }
      return 0
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.openSearch = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        moeId: null,
        moeJtbh: null,
        moeXs: null,
      }
      this.resetForm('form')
    },

    clickRow(row) {
      if (row) {
        this.nowData = row
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
      this.openSearch = false
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    handleSearch() {
      this.reset()
      this.title = '查询'
      this.openSearch = true
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.form.moeId = this.nowData.moeId
      this.form.moeJtbh = this.nowData.moeJtbh
      this.form.moeXs = this.nowData.moeXs
      this.open = true
      this.title = '修改'
    },

    exportExcel(id, title) {
      exportTable(id, title)
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateDeviceAlter(this.form.moeId, this.form.moeJtbh, this.form.moeXs).then((response) => {
            this.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
        }
      })
    },
  },
}
</script>
